<script setup>
import { getModelTypeList, getModelList } from "@/api/templateMarket";
import { collectCloudFile } from "@/api/myClooud";
import { ref, onMounted, toRaw } from "vue";
import ListCard from "./components/ListCard.vue";
import { message } from "@/utils/message";
import { useRouter } from "vue-router";
defineOptions({
  name: "templateMarketList"
});

const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;
const router = useRouter();
const pagination = ref({ currentPage: 1, pageSize: 12, total: 0 });
const templateMarketList = ref([]);
const modelTypeList = ref([]);
const dataLoading = ref(true);
const activeId = ref("");

const getModelTypeListData = async () => {
  try {
    const { data } = await getModelTypeList(toRaw(pagination.value));
    modelTypeList.value = [{ id: null, typeName: "精选模版" }, ...data];
  } catch (e) {
    message(e.message, { type: "error" });
  } finally {
    dataLoading.value = false;
  }
};
const getModelListData = async type => {
  try {
    activeId.value = type?.id ? type.id : null;
    const { data } = await getModelList(
      toRaw({
        ...pagination.value,
        labelModelTypeId: activeId.value,
        name: name.value
      })
    );
    templateMarketList.value = data.records;
    pagination.value.currentPage = data.currentPage;
    pagination.value.pageSize = data.pageSize;
    pagination.value.total = data.total;
  } catch (e) {
    message(e.message, { type: "error" });
  } finally {
    dataLoading.value = false;
  }
};
onMounted(() => {
  getModelTypeListData();
  getModelListData();
});

const handleChangeType = type => getModelListData(type);

const handleEditTemplate = product => {
  router.push({
    name: "tagGraph",
    query: {
      name: product.name,
      width: product.width,
      height: product.height,
      parentId: 0,
      id: product.id
    }
  });
};
const handleFavoriteTemplate = product => {
  collectCloudFile({ id: product.id }).then(res => {
    if (res.code === 20000) {
      message(`${product.name}收藏成功`, {
        type: "success"
      });
    } else {
      message(`${product.name}收藏失败`, {
        type: "error"
      });
    }
  });
};
const name = ref("");

const onPageSizeChange = size => {
  pagination.value.pageSize = size;
  pagination.value.currentPage = 1;
  getModelListData();
};
const onCurrentChange = currentPage => {
  pagination.value.currentPage = currentPage;
  getModelListData();
};
</script>

<template>
  <div>
    <div>
      <el-input
        v-model="name"
        style="width: 300px"
        placeholder="请输入模版名称"
        clearable
        @change="getModelListData"
      >
        <template #suffix>
          <el-icon class="el-input__icon">
            <IconifyIconOffline
              v-show="name.length === 0"
              icon="ri:search-line"
            />
          </el-icon>
        </template>
      </el-input>
    </div>
    <div class="scene">
      <div
        v-for="(item, index) in modelTypeList"
        :key="index"
        class="scene-item"
        @click="handleChangeType(item)"
      >
        <div :class="{ active: item.id == activeId }" class="sceneName">
          {{ item.typeName }}
        </div>
      </div>
    </div>

    <div
      v-loading="dataLoading"
      :element-loading-svg="svg"
      element-loading-svg-view-box="-10, -10, 50, 50"
    >
      <template v-if="pagination.total > 0">
        <el-row :gutter="16">
          <el-col
            v-for="(product, index) in templateMarketList"
            :key="index"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
            :xl="4"
          >
            <ListCard
              :product="product"
              @EditTemplate="handleEditTemplate"
              @FavoriteTemplate="handleFavoriteTemplate"
            />
          </el-col>
        </el-row>
        <el-pagination
          v-model:currentPage="pagination.currentPage"
          class="float-right"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          :page-sizes="[12, 24, 36]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="onPageSizeChange"
          @current-change="onCurrentChange"
        />
      </template>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.scene {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding-bottom: 10px;
  margin-top: 1.46rem;
  font-size: 14px;

  .scene-item {
    display: inline-block;
    margin-right: 1.23rem;
    font-weight: bolder;
    font-weight: 400;
    color: rgb(108 125 143);
    text-align: center;
    cursor: pointer;
    opacity: 1;

    .sceneName {
      width: max-content;
    }
  }
}

.active {
  font-weight: bolder;
  color: rgb(33 41 48);
}
</style>
